<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 400px;
				height: 400px;
				background-color: aqua;
			}
			#div2{
				width: 300px;
				height: 300px;
				margin-top: 25px;
				margin-left: 50px;
				background-color: orange;
			}
			#div3{
				width: 200px;
				height: 200px;
				margin-top: 25px;
				margin-left: 50px;
				background-color: lawngreen;
			}
			#div4{
				width: 100px;
				height: 100px;
				margin-top: 25px;
				margin-left: 50px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			第一个DIV
			<div id="div2">
				第二个DIV
				<div id="div3">
					第三个DIV
					<div id="div4">
						第四个DIV
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var obj=document.getElementById('div1')
		console.log('1级父元素为'+console.log(obj.parentElement))
		console.log('1级父节点为'+console.log(obj.parentNode))
		
		var obj1=document.getElementById('div2')
		console.log('2级父元素为'+console.log(obj1.parentElement))
		console.log('2级父节点为'+console.log(obj1.parentNode))
		
		var obj2=document.getElementById('div3')
		console.log('3级父元素为'+console.log(obj2.parentElement))
		console.log('3级父节点为'+console.log(obj2.parentNode))
		
		var obj3=document.getElementById('div4')
		console.log('4级父元素为'+console.log(obj3.parentElement))
		console.log('4级父节点为'+console.log(obj3.parentNode))
		
		
		var obj4=document.getElementById('div1')
		console.log('1级子元素为'+console.log(obj4.children))
		console.log('1级子节点为'+console.log(obj4.childNodes))
		
		var obj5=document.getElementById('div2')
		console.log('2级子元素为'+console.log(obj5.children))
		console.log('2级子节点为'+console.log(obj5.childNodes))
		
		var obj6=document.getElementById('div3')
		console.log('3级子元素为'+console.log(obj6.children))
		console.log('3级子节点为'+console.log(obj6.childNodes))
		
		var obj7=document.getElementById('div4')
		console.log('4级子元素为'+console.log(obj7.children))
		console.log('4级子节点为'+console.log(obj7.childNodes))
	</script>
</html>
